<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类</title>

    <link rel="stylesheet" type="text/css" href="../css/aui2.1/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/swiper/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/icon/iconfont.css" />

    <style>
    body{background: #fff;color:#757575;}
    a {  text-decoration:none out-line: nonecolor: #*****;color:#757575;}
    .aui-searchbar{background: #fff;}
    /*.aui-bar.aui-bar-light{background-size: 100% 0px;}*/
    .aui-searchbar-input{background: #f7f7f7;border-radius: 0.7rem;}

    .left-wrap{width:4.5rem;height:100%;background: #f7f7f7;float:left;}
    .right-wrap{width:calc(100% - 4.5rem);height:100%;float:right;font-size: 0.7rem;padding:0 0.5rem;}
    .nav-item{height:2.5rem;line-height: 2.5rem;text-align: center;color:#333;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;font-size: 0.7rem;}
    .nav-item.active{color:#6cc060;background: #fff;border-right:0px;border-left:0.2rem solid #6cc060;border-right:0.2rem solid #fff;box-sizing: border-box;}
    .nav-item.active a{color:#6cc060;}

    .type-title{padding:0.5rem 0;}
    .aui-grid [class*=aui-col-]{padding:0.5rem 0;}
    .aui-grid img{width:80%;display: block;margin:0 auto;}
    .wrap-box{height:100%;overflow-y: auto;}
    .aui-bar-tab .aui-active{color:#80d174;}
    #footer{border-top: 1px solid #ddd;box-sizing: border-box;}
    #footer .iconfont{font-size: 1rem;}
    .aui-bar-tab .aui-bar-tab-label{font-size: 0.5rem;}

    </style>
</head>

<body>

<header class="aui-bar aui-bar-nav aui-bar-light" id="header">
    <div class="aui-title" style="left:1rem; right: 1rem;">
        <div class="aui-searchbar">
            <div class="aui-searchbar-input">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" placeholder="请输入搜索内容" id="search-input">
            </div>
        </div>
    </div>
</header>
<div class="aui-content">
  <div class="left-wrap">
    <div class="nav-item"><a href="#1F">新鲜禽兽</a></div>
    <div class="nav-item active"><a href="#2F">新鲜禽兽</a></div>
    <div class="nav-item"><a href="#3F">新鲜禽兽</a></div>
    <div class="nav-item"><a href="#4F">新鲜禽兽</a></div>
    <div class="nav-item"><a href="#5F">新鲜禽兽</a></div>
  </div>
  <div class="right-wrap">
    <div class="wrap-box">
      <div id="1F" class="type-title">水果</div>
      <section class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>

        </div>
      </section>
      <div id="2F" class="type-title">水果</div>
      <section class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>

        </div>
      </section>
      <div id="3F" class="type-title">水果</div>
      <section class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>

        </div>
      </section>
      <div id="4F" class="type-title">水果</div>
      <section class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>

        </div>
      </section>
      <div id="5F" class="type-title">水果</div>
      <section class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>
          <div class="aui-col-xs-4">
              <img src="../image/icon_11.png" alt="">
              <div class="aui-grid-label">首页</div>
          </div>

        </div>
      </section>



    </div>
  </div>
</div>


<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item " tapmode>
        <i class="icon iconfont icon-weibiaoti--"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="icon iconfont icon-fenlei"></i>
        <div class="aui-bar-tab-label">分类</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <!-- <div class="aui-badge">2</div> -->
        <i class="icon iconfont icon-gouwucheman"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item " tapmode>
        <i class="icon iconfont icon-wode"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>

</body>

</html>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/swiper/swiper.min.js"></script>

<script type="text/javascript">
  $(function(){
    var winHeight = $(window).height();
    var headerHeight = $("#header").height();
    var footerHeight = $("#footer").height();
    $(".left-wrap").height(winHeight - headerHeight - footerHeight);
    $(".right-wrap").height(winHeight - headerHeight - footerHeight);

    $("a").click(function () {
        $(this).parent(".nav-item").addClass("active");
        $(this).parent(".nav-item").siblings().removeClass("active");
        $(".wrap-box").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);
        return false;
    });

  })


</script>
